<template>
  <div class="cabinet-container">
    <div
      v-for="(item, index) in data"
      :key="index"
      class="cabinet-item"
      :class="{
        'cabinet-item-0': item.state === '0',
        'cabinet-item-1': item.state === '1',
        'cabinet-item-2': item.state === '2',
      }"
    >
      <!-- 快递柜编号 -->
      <div class="cabinet-number">{{ '编号：' + item.number }}</div>

      <!-- 中心图标 -->
      <el-tooltip :content="item.price + '元 / 小时'" placement="top">
        <img src="@/assets/kuaidigui.png" style="width: 64px; height: 64px;">
      </el-tooltip>

      <!-- 状态小圆圈 -->
      <el-tooltip :content="getStateText(item.state)" placement="top">
        <div class="cabinet-state"></div>
      </el-tooltip>

      <!-- 门状态 -->
      <div class="cabinet-door">
        <el-tooltip :content="item.isclosed === '1' ? '已关门' : '未关门'" placement="top">
          <img class="suo" v-if="item.isclosed === '1'" src="@/assets/suoding.png" style="width: 24px; height: 24px;">
          <img class="suo" v-else src="@/assets/jiesuo.png" style="width: 24px; height: 24px;">
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CabinetStatus',
  props: {
    data: {
      type: Array,
      required: true,
      validator: (value) =>
      {
        // 验证 props 数据格式
        return value.every((item) =>
        {
          return (
            typeof item.number === 'number' &&
            ['0', '1', '2'].includes(item.state) &&
            ['0', '1'].includes(item.isclosed) && // 验证 isclosed 字段
            typeof item.price === 'string' // 验证 price 字段
          )
        })
      }
    }
  },
  methods: {
    // 根据状态返回对应的文本
    getStateText(state)
    {
      switch (state)
      {
      case '0':
        return '空闲'
      case '1':
        return '使用中'
      case '2':
        return '维护中'
      default:
        return '未知状态'
      }
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.cabinet-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 14px; /* 子元素间距 */
}

/* 子元素样式 */
.cabinet-item {
  width: 110px;
  height: 110px;
  border-radius: 10px;
  background-color: #f5f5f5; /* 默认背景色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  /* 外阴影：模拟光源从左上角照射 */
  box-shadow:
    10px 10px 20px rgba(0, 0, 0, 0.296), /* 右下角阴影 */
    -10px -10px 20px rgba(255, 255, 255, 0.7); /* 左上角高光 */

  /* 内阴影：增强立体感 */
  box-shadow:
    inset 6px 6px 10px rgba(0, 0, 0, 0.088), /* 右下角内阴影 */
    inset -6px -6px 10px rgba(255, 255, 255, 0.198); /* 左上角内高光 */
}

/* 快递柜编号样式 */
.cabinet-number {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

/* 状态小圆圈样式 */
.cabinet-state {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  bottom: 16px;
  right: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 4%,
    transparent 70%
  ); /* 添加径向渐变 */
  animation: breathe 1s infinite ease-in-out; /* 添加呼吸动画 */
}

/* 定义呼吸动画 */
@keyframes breathe {
  0% {
    opacity: 0.4; /* 初始透明度 */
    transform: scale(0.9); /* 初始缩放 */
  }
  50% {
    opacity: 1; /* 最大透明度 */
    transform: scale(1.1); /* 最大缩放 */
  }
  100% {
    opacity: 0.4; /* 回到初始透明度 */
    transform: scale(0.9); /* 回到初始缩放 */
  }
}

/* 不同状态的背景色和小圆圈颜色 */
.cabinet-item-0 .cabinet-state {
  background-color: rgb(109, 255, 52); /* 空闲 */
}
.cabinet-item-1 .cabinet-state {
  background-color: rgb(246, 45, 45); /* 使用中 */
}
.cabinet-item-2 .cabinet-state {
  background-color: rgb(255, 179, 38); /* 维护中 */
}

/* 门状态样式 */
.cabinet-door {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.suo {
  position: relative;
  top: 4px;
}
</style>
